<nz-spin [nzSpinning]="isSpinning">
  <div class="home">
    <div class="header">智能图像检测服务</div>

    <div class="account">
      <a class="mgr-link" [href]="'' | adminUrl" target="_blank">数据管理</a>

      <span style="font-size: 20px">{{user?.name}}</span>
    </div>

    <div class="search flex-row">
      <div class="search-left">
        <button class="upload">本地上传</button>
        <input #filesInput type="file" value="本地上传" multiple (change)="fileUpload($event)">
      </div>

      <div class="search-right flex-column">
        <div class="search-input">
          <input (paste)="onPasteImage($event)" [(ngModel)]="pasteText" class="search-img" type="text"
                 placeholder="截图后，在输入框Ctrl+V即可以图搜图">
        </div>

        <div class="search-drag flex-row" appDragDropUpload (fileDropped)="onFileDropped($event)">
          你也可以将图片拖拽至此处搜图
        </div>
      </div>
    </div>


    <div class="recommend">
      <div class="recommend-title">样本图片</div>

      <div class="recommend-pictures flex-row">
        <div class="recommend-picture">
          <img class="img-responsive" style="width: 100%;" src="assets/images/train-type-kjg.png" alt="图片">
          <div class="type-train-count">
            <span style="color: #eea200;">{{imageAllCount.kjg}}</span>
            <span style="color: #ffffff">个</span>
          </div>
        </div>

        <div class="recommend-picture">
          <img class="img-responsive" style="width: 100%;" src="assets/images/train-type-hw.png" alt="图片">
          <div class="type-train-count">
            <span style="color: #eea200;">{{imageAllCount.hw}}</span>
            <span style="color: #ffffff">个</span>
          </div>
        </div>

        <div class="recommend-picture">
          <img class="img-responsive" style="width: 100%;" src="assets/images/train-type-yg.png" alt="图片">
          <div class="type-train-count">
            <span style="color: #eea200;">{{imageAllCount.yg}}</span>
            <span style="color: #ffffff">个</span>
          </div>
        </div>

        <div class="recommend-picture">
          <img class="img-responsive" style="width: 100%;" src="assets/images/train-type-sar.png" alt="图片">
          <div class="type-train-count">
            <span style="color: #eea200;">{{imageAllCount.sar}}</span>
            <span style="font-size: 24px ;color: #ffffff">个</span>
          </div>
        </div>

      </div>
    </div>

    <div class="recommend">
      <div class="recommend-title">热点图片</div>

      <div class="recommend-pictures flex-row">
        <div class="recommend-picture hot-image-container" *ngFor="let hotImg of hotspots">
          <img class="img-responsive" [src]="hotImg | ossPath" alt="图片" (click)="detectHotspot(hotImg)">
        </div>

        <!--
        <div class="recommend-picture">
          <img class="img-responsive" src="assets/images/IMG_2529.PNG" alt="图片">
        </div>

        <div class="recommend-picture">
          <img class="img-responsive" src="assets/images/IMG_2528.PNG" alt="图片">
        </div>

        <div class="recommend-picture">
          <img class="img-responsive" src="assets/images/IMG_2531.PNG" alt="图片">
        </div>
        -->

      </div>
    </div>

    <div class="concern">
      <div class="concern-title">大家关注</div>

      <div class="concern-contents flex-row">
        <!--
        <a class="concern-content" href="#">载流环</a>
        <a class="concern-content" href="#">承力索线夹</a>
        <a class="concern-content" href="#">鸡心环</a>
        <a class="concern-content" href="#">接触线线夹</a>
        <a class="concern-content" href="#">钳压管</a>
        <a class="concern-content" href="#">高铁受电弓</a>
        <a class="concern-content" href="#">地铁受电弓</a>
        <a class="concern-content" href="#">受电弓结构异常</a>
        <a class="concern-content" href="#">受电弓异物检测</a>
        <a class="concern-content" href="#">受电弓电气异常</a>
        <a class="concern-content" href="#">受电弓特殊工况</a>
        -->

        <a class="concern-content" href="#">驱逐舰</a>
        <a class="concern-content" href="#">驱逐舰的特点</a>
        <a class="concern-content" href="#">驱逐舰的排名</a>
        <a class="concern-content" href="#">驱逐舰图片大全</a>
        <a class="concern-content" href="#">驱逐舰采用平甲板船型的优点是</a>


      </div>
    </div>
  </div>
</nz-spin>
